<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo11-深入组件-prop-双向绑定</title>
</head>
<script src="../libs/vue.js"></script>
<body> 
    <div id="app"> 
      <div>

        <base-doc  v-bind:text.sync="text"></base-doc>
        <button v-on:click="changeText">变更text</button> 
      </div> 
    </div>
</body>
<script>
Vue.config.productionTip = false;
Vue.component('base-doc', { 
  props: { 
    text: String 
  },
  template: `
    <div>
      <input
      type="text"
      v-bind:value="text"
      >{{ text }}  
      <hr><br>
    </div>
  `,
  mounted:function(){
    /**
     * 可看到 v-bind:text.sync="text"  子组件中默认添加了 update:text 事件，以与父组件做同步
     * 
     * 当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用:
     * <text-document v-bind.sync="doc"></text-document>
     * 这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。
     * 
     * 论阅读的重要性！
     */ 
    console.log(this.$listeners);
  }
});

var app = new Vue({
  el: '#app',
  data:{
    text:'aaa'
  },
  methods:{
    changeText:function(){
      console.log(this.$listeners);
      this.text = '内容随机：'+Math.random();
    }
  }
});

</script>
</html>